<!DOCTYPE html>
<html lang="en">
<head>                                                                            
    <meta charset="utf-8">                                                        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    <meta http-equiv="X-UA-Compatible" content="ie=edge">                         
    <title>DeWeb : Delphi-Web  development platform</title>                                                          
    <!-- 引入样式 -->                                                             
    <link rel="stylesheet" type="text/css" href="dist/theme-chalk/index.css"/>    
    <!-- 引入组件库 -->                                                           
    <script src="dist/vue.js" type="text/javascript"></script>                    
    <script src="dist/index.js" type="text/javascript"></script>                  
    <script src="dist/axios.min.js" type="text/javascript"></script>              
</head>  
<body>
    <div id="app">
        <select size=3 class="dwselect" v-model='optionesValue' style="position:absolute;top:100px;left:20px;width:200px;height:160px;">
            <option class="dwoption" v-for="(item,index) of listArray" :value=item.age :key='index'>{{item.age}}</option>
        </select>
        <button v-on:click='buttonClickAtion' style="display: inline-block;margin-left: 20PX">Get</button>
        <button v-on:click='buttonClickAtion0' style="display: inline-block;margin-left: 20PX">Set</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data:{
                optionesValue:'24',
                listArray:[
				    {name:'01',age:'21'},
                    {name:'02',age:'22'},
                    {name:'03',age:'23'},
                    {name:'04',age:'24'},
                    {name:'05',age:'25'},
                    {name:'06',age:'26'},
                    {name:'07',age:'27'},
                    {name:'08',age:'28'},
                    {name:'09',age:'29'},
                    {name:'10',age:'30'},
                    {name:'11',age:'31'},
                    {name:'12',age:'32'}
                ]
            },
            methods:{
                buttonClickAtion:function()
                {
                    alert(this.optionesValue);
                },
                buttonClickAtion0:function()
                {
                    this.optionesValue = '23';
                }
           }
        })
    </script>
</body>
</html>
